<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span class="title">CIF历史成交记录</span>
      </div>
    </template>
    <SearchForm 
      :formData="formData"
      :columns="formColumns"
      @submit="methods.getList"
      @reset="methods.getList"
    />
  </el-card>

  <el-card style="margin-top: 10px;">
    <CustomTable 
      :tableData="tableData"
      :columns="tableColumns"
      v-loading="loading"
    />
    <Pagination 
      v-model:pageNum="pageInfo.pageNum"
      v-model:pageSize="pageInfo.pageSize"
      :total="total"
      :callback="() => {}"
    />
  </el-card>
</template>

<script setup>
import { ref, reactive, watch, computed, onMounted, h } from 'vue'
import { useTable } from '@/hooks'
import { getList } from '@/api/MonitorIndex/CustomerAlertCif'
import { selectDistinctYYB } from '@/api'

const userId = JSON.parse(localStorage.getItem('currentUser')).userId
const { tableData, pageInfo, total, loading, methods } = useTable({
  getDataApi: () => getList({
    ...formData, 
    ...pageInfo,
    userId,
    flag: 1,
  }),
})
const formData = reactive({})
const formColumns = computed(() => ([
  { label: '客户号', prop: 'khh', component: 'el-input', style: { width: '20%'} },
  { label: '股东号', prop: 'gdh', component: 'el-input', style: { width: '20%'} },
  { 
    label: '日期', prop: 'period', component: 'el-date-picker', 
    componentProps: {
      type: 'date',
      placeholder: '请选择日期',
      format: 'YYYY-MM-DD',
      'value-format': 'YYYYMMDD'
    },
    style: { width: '20%'} 
  },
  {
    label: '营业部名称',
    prop: 'yyb',
    component: 'el-select',
    options: yybList.value,
    componentProps: {
      clearable: true,
      filterable: true,
      'filter-method': handleFilterMethod
    },
    showValue: true,
    style: { width: '20%' }
  },
  { label: '证券代码', prop: 'zqdm', component: 'el-input', style: { width: '20%'} },
]))
const tableColumns = ref([
  { label: '序号', type: 'index', width: 60 },
  { label: '营业部代码', prop: 'yyb', width: 100 },
  { label: '客户号', prop: 'khh', width: 120 },
  { label: '客户姓名', prop: 'khxm', width: 100 },
  { label: '股东号', prop: 'gdh', width: 100 },
  { label: '证券代码', prop: 'zqdm', width: 100 },
  { label: '证券类别', prop: 'zqlb', width: 100 },
  { label: '交易类别', prop: 'jylb', width: 100 },
  { label: '委托号', prop: 'wth', width: 100 },
  { label: '成交时间', prop: 'cjsj', width: 100 },
  { label: '成交数量', prop: 'cjsl', width: 100 },
  { label: '成交均价', prop: 'cjjg', width: 100 },
  { label: '总成交金额', prop: 'cjje', width: 100 },
  { label: '佣金', prop: 's1', width: 100 },
  { label: '日期', prop: 'period', width: 100 },
])
const yybList = ref([])
const yybFilterList = ref([])

const getYybList = async () => {
  selectDistinctYYB().then(res => {
    yybFilterList.value = res.data.rows.map(item => ({ value: item.jgdm, label: item.jgmc, before: item.jgdm, after: item.jgmc }))
  })
}
const handleFilterMethod = (query) => {
  if(query) {
    return yybList.value = yybFilterList.value.filter(item => item.value.includes(query) || item.label.includes(query) )
  } else {
    return yybList.value = yybFilterList.value
  }
}

onMounted(() => {
  getYybList()
})
</script>
